<template>
  <div class="home-container">
    <el-row>
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>工作台</span>
            </div>
          </template>
          <div class="flex justify-between">
            <!--头像-->
            <div class="flex">
              <img
                class="w-20 h-20 border-green-600 rounded-full border-2"
                src="https://png.pngtree.com/png-clipart/20220404/original/pngtree-d-rendering-male-character-profile-or-avatar-happy-young-man-with-png-image_7512919.png"
                alt=""
              />
              <div class="flex flex-col justify-around ml-3">
                <div class="font-semibold text-1xl">
                  早上好，Andy，青春只有一次，别让自己过得不精彩
                </div>
                <div>今日天气预报:</div>
                <div class="flex justify-around">
                  <weather-info label="天气类型" :value="weather.text" />
                  <weather-info label="温度" :value="weather.temp" />
                  <weather-info label="风力等级" :value="weather.windScale" />
                  <weather-info label="风向" :value="weather.windDir" />
                </div>
              </div>
            </div>
            <div class="flex">
              <div
                v-for="item in infoItems"
                :key="item.label"
                class="flex flex-col justify-around items-end px-10 border-after"
              >
                <div>{{ item.label }}</div>
                <div class="font-semibold text-2xl">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt-2" :gutter="20">
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="flex items-center">
              <svg-icon icon-class="visit" :size="20" />
              <span class="ml-2 text-base font-700">访问量</span>
            </div>
          </template>
          <visitChart
            id="visitChart"
            height="350px"
            width="100%"
            class="bg-[var(--el-bg-color-overlay)]"
          />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg-icon icon-class="fork" :size="20" />
              <span class="ml-2 text-base font-700">Fork量</span>
            </div>
          </template>
          <forkChart
            id="forkChart"
            height="350px"
            width="100%"
            class="bg-[var(--el-bg-color-overlay)]"
          />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg-icon icon-class="star" :size="20" />
              <span class="ml-2 text-base font-700">Star量</span>
            </div>
          </template>
          <starChart
            id="starChart"
            height="350px"
            width="100%"
            class="bg-[var(--el-bg-color-overlay)]"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt-2">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="ml-2 text-base font-700">Sj-Admin 介绍</span>
            </div>
          </template>
          <div>
            Sj-Admin 是基于 Vue3 + Vite5+ Element-Plus + Pinia
            等最新主流技术栈构建的后台管理前端模板
          </div>
          <div>
            代码仓库地址：<a
              href="https://gitee.com/songtonngxue/vue3-element-plus-vue"
              target="_blank"
              >https://github.com/sj-admin/sj-admin</a
            >
          </div>
          <div>预览地址：<a href="" target="_blank">暂无</a></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mt-2">
      <el-col>
        <el-card>
          <Banner />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import axios from "axios";
import WeatherInfo from "./components/WeatherInfo.vue";
import visitChart from "./components/visitChart.vue";
import forkChart from "./components/forkChart.vue";
import starChart from "./components/starChart.vue";
import Banner from "./components/banner.vue";
const weather = reactive({
  text: "",
  temp: "",
  windScale: "",
  windDir: "",
});
const infoItems = reactive([
  { label: "项目数", value: "12" },
  { label: "待办项", value: "3/20" },
  { label: "当前日期", value: "" },
]);
onMounted(() => {
  tq();
  infoItems[2].value = getCurrentDate();
});

const tq = () => {
  const location = "101010100";
  const key = "76fc71860dd7411f8746a4c64d215427";

  const config = {
    method: "get",
    url: `https://devapi.qweather.com/v7/weather/now?location=${location}&key=${key}`,
  };

  axios(config)
    .then((res) => {
      weather.text = res.data.now.text; //天气
      weather.temp = res.data.now.temp; //温度
      weather.windScale = res.data.now.windScale; //风力等级
      weather.windDir = res.data.now.windDir; //风向
    })
    .catch((err) => {
      console.log(err);
    });
};
const getCurrentDate = () => {
  return new Date().toLocaleDateString();
};
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  padding: 20px;
}
img {
  aspect-ratio: 1;
  cursor: pointer;
  transition: 0.5s;
}
img:hover {
  transform: scale(1.1);
}
.border-after {
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 20%;
    right: 0;
    height: 60%;
    width: 1px;
    background-color: #e0e0e0;
  }
}
</style>
